<!--
* @description 巡检点位
* @author xyjia
* @date 2022/01/11 10:31:54
!-->
<template>
  <div class="inspect-main">
    <van-nav-bar title="巡检点位" fixed left-arrow @click-left="onClickLeft">
      <template #right>
        <pop-popover @getOrgIds="getOrgIds" @getPoint="getPoint" @ClearOrgIdsPoint="ClearOrgIdsPoint"
          :clearbyout="clearbyout" />
      </template>
    </van-nav-bar>/>
    <van-search class="inspect-searchcss" v-model="search" placeholder="请输入点位编码、名称、地址" @search="onSearch" />
    <inspect-all-pointList :setOrgIds="setOrgIds_list" :setPoint="setPoint_list" :searchvalue="searchvalue"
      :setClearall="clearbyout" />
    <div class="scan_code" @click="scan_code">
      <i class="iconfont icon-saoyisao"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import InspectAllPointList from './InspectAllPointList'
import PopPopover from '@/components/PopPopover'

export default {
  name: 'InspectAllPoint',
  data() {
    return {
      qRcode: '',
      setOrgIds_list: '',
      setPoint_list: '',
      searchvalue: '',
      search: '',
      scanResult: '',
      codeGet: '',
      clearbyout: false
    }
  },

  components: {
    InspectAllPointList,
    PopPopover
  },

  watch: {},

  computed: {
    ...mapState(['userInfo']),
  },

  created() {

  },
  mounted() { },
  beforeRouteLeave(to, from, next) {
    if (to.name == 'InspectAllPointDetail' || to.name == 'InspectAllPointEdit') {
      // 进入下一页 离开
      to.meta.isBack = true
      from.meta.keepAlive = true
    } else {
      // 返回上一页 离开
      this.clearbyout = false
      this.search = ""
      this.searchvalue = ""
      to.meta.keepAlive = false
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    if (from.name == 'InspectAllPointDetail' || from.name == 'InspectAllPointEdit') {
      // 上一页返回 进入当前页
      to.meta.isBack = true
      to.meta.keepAlive = true
    } else {
      // 第一次进入当前页
      to.meta.isBack = false
      to.meta.keepAlive = true
    }
    next();
  },
  activated() {
    let that = this
    if (that.$route.meta.isBack) {
      // 上一页返回进入
    } else {
      // 第一次进入
      this.clearbyout = true
      this.searchvalue = ""
      this.ClearOrgIdsPoint()
    }
    // 扫描二维码或者nfc原生返回过来的数据
    window.getQode = (code) => {
      this.codeGet = code
      this.inspectToPoint(this.codeGet)
    }

  },
  methods: {
    // 搜索值
    onSearch(value_search) {
      this.searchvalue = value_search
    },
    //筛选清空按钮
    ClearOrgIdsPoint() {
      this.setOrgIds_list = ''
      this.setPoint_list = ''
    },
    // 单位值
    getOrgIds(value_OrgIds) {
      this.setOrgIds_list = JSON.stringify(value_OrgIds.organizationId)
    },
    // 点位值
    getPoint(value_Point) {
      this.setPoint_list = JSON.stringify(value_Point.id)
    },
    // 扫描二维码
    scan_code() {
      this.$native.scanQrCode()
      // this.scanResult = this.$native.scanResult()
      // this.inspectToPoint('2224321502154879333333337777777')
    },
    // 跳转到巡检点位进行编辑
    inspectToPoint(code) {
      this.$router.push({
        name: 'InspectAllPointEdit',
        query: {
          pointCode: code,
          id: '',
        },
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  },
}
</script>
<style lang='scss'>
.inspect-main {
  .van-tab {
    font-size: 16px;
  }

  &__tabs {
    >.van-tab--active {
      font-size: 16px;
      font-weight: bold;
      color: #2471ca;
    }

    >.van-tabs__wrap {
      position: fixed;
      width: 100%;
      z-index: 10;
      padding-top: 10px;
      background: #fff;
      top: 46px;
    }

    >.van-tabs__content {
      margin-top: 110px;
    }
  }

  .inspect-searchcss {
    margin-top: 25px;
  }

  .scan_code {
    position: fixed;
    right: 30px;
    bottom: 10%;
    background: #2979d1;
    height: 38px;
    width: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0px 2px 10px 2px rgba(181, 200, 206, 0.5);

    .iconfont {
      font-size: 24px;
      color: #fff;
    }
  }
}</style>